<template>
	<view :id="templateId" class="content">
		<view class="cell">
			<view class="row">
				<text class="tit">联系人</text>
				<input
					class="input"
					type="text"
					maxlength="10"
					v-model="addressData.customerName"
					placeholder="收货人姓名"
					placeholder-class="placeholder"
				/>
			</view>
			<view class="row">
				<text class="tit">手机号</text>
				<input
					class="input"
					type="number"
					maxlength="11"
					v-model="addressData.phone"
					placeholder="收货人手机号码"
					placeholder-class="placeholder"
				/>
			</view>
			<view @click="chooseLocation()" class="row">
				<text class="tit">地址</text>
				<text class="input"
					>点击从地图选择{{
						addressData.address && "（修改地址）"
					}}</text
				>
				<uni-icon
					:color="themeStyles.lightMainColor"
					name="address-full"
					size="40rpx"
				>
				</uni-icon>
			</view>
			<view v-if="!!addressData.address" class="row">
				<!-- <view class="tit">详细地址</view> -->
				<view @click.stop="toggleAddressInput()" class="input">{{
					addressData.address
				}}</view>
			</view>
			<view class="row">
				<text class="tit">门牌号</text>
				<input
					class="input"
					type="text"
					maxlength="30"
					v-model="addressData.area"
					placeholder="楼号、门牌"
					placeholder-class="placeholder"
				/>
			</view>
		</view>

		<view class="cell">
			<view class="row default-row">
				<text class="tit">设为默认</text>
				<switch
					:color="themeStyles.lightMainColor"
					:checked="addressData.isDefault == 1"
					@change="switchChange"
				/>
			</view>
		</view>

		<!-- 地址输入框弹出层 begin -->
		<view v-if="showAddress" class="pof df explain-pop">
			<view class="poa input-box">
				<view class="tar btn-group">
					<text
						@click="toggleAddressInput()"
						:style="themeStyles.textMainColor"
						class="confirm"
						>确定</text
					>
				</view>
				<textarea
					v-model="addressData.address"
					@confirm="toggleAddressInput()"
					cursor-spacing="120"
					:focus="true"
					:fixed="true"
					class="bd main-text light-text"
					placeholder-class="main-text"
					:maxlength="100"
					type="text"
				></textarea>
			</view>
		</view>
		<!-- 地址输入框弹出层 end -->

		<button
			:style="themeStyles.btnFullColor"
			class="btn btn-full"
			@click="confirm()"
		>
			提交
		</button>
		<button
			v-if="addressData.customerAddrId"
			:style="themeStyles.btnAuxiliaryColor"
			class="btn"
			@click="removeAddress()"
		>
			删除
		</button>
	</view>
</template>

<script>
import {
	queryAddressDetail,
	updateAddress,
	deleteAddress
} from "@/lib/api/customerServer/address";

/** components begin */
import uniIcon from "@/components/uniIcon/uniIcon";
/** components end */

// let operateFn = null;
let msg = "null";
export default {
	components: {
		uniIcon
	},
	data() {
		return {
			showAddress: false, // 地址输入弹出框
			addressData: {
				isDefault: 2, // 1: 默认, 2: 非默认
				customerName: "",
				address: "",
				phone: "",
				name: "在地图选择",
				area: ""
			}
		};
	},

	onLoad(option) {
		console.log("option", option);
		if (option.type === "edit") {
			msg = "编辑";
			this.addressData = JSON.parse(option.data);
		} else {
			msg = "新增";
		}

		this.manageType = option.type;
		uni.setNavigationBarTitle({
			title: msg + "收货地址"
		});
	},

	methods: {
		// 地址输入框弹出层开关
		toggleAddressInput() {
			this.showAddress = !this.showAddress;
		},

		//提交
		confirm() {
			if (!this.validator()) {
				return;
			}
			// let data = this.addressData;

			// return;
			this.operateAddrInfo();

			//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
			// this.$api.prePage().refreshList(data, this.manageType);
			// this.$api.showToast(`地址${msg}成功`);
		},

		// 添加 OR 修改地址
		async operateAddrInfo() {
			const addressData = this.addressData;
			const propsData = {
				customerName: addressData.customerName,
				phone: addressData.phone,
				address: addressData.address,
				name: addressData.name,
				area: addressData.area,
				isDefault: addressData.isDefault,
				customerAddrId: addressData.customerAddrId || ""
			};

			try {
				const res = await updateAddress(propsData);
				this.$api.showToast(`地址${msg}成功`);
				setTimeout(() => {
					uni.navigateBack();
				}, 800);
			} catch (error) {
				console.log("error", error);
				this.$api.showToast(error.resultInfo || "操作失败");
			}
		},

		async removeAddress() {
			try {
				await this.$api.showModal({
					title: "提示",
					content: "确认删除地址?",
					showCancel: true
				});
			} catch (error) {
				console.log("error", error);
				return;
			}

			const propsData = {
				id: this.addressData.customerAddrId
			};
			try {
				await deleteAddress(propsData);
				await this.$api.showToast("成功删除");
				uni.navigateBack();
			} catch (error) {
				console.log("error", error);
				this.$api.showToast(error.resultInfo || "操作失败");
			}
		},

		// 是否设为默认地址
		switchChange(e) {
			let isDefault = null;
			e.detail.value ? (isDefault = 1) : (isDefault = 2);
			this.addressData.isDefault = isDefault;
		},

		//地图选择地址
		chooseLocation() {
			const addressData = this.addressData;
			console.log("1");
			uni.authorize({
				scope: "scope.userLocation",
				success: res => {
					console.log("a");
					uni.chooseLocation({
						success: data => {
							console.log("data", data);
							this.addressData.name = data.name;
							this.addressData.address = data.address;
							this.addressData = addressData;
							console.log(
								"this.addressData.name",
								this.addressData.name
							);
						}
					});
				},
				fail: error => {
					console.log("error", error);
					const modalData = {
						title: "警告",
						content: "若不授权就无法使用地址",
						showCancel: true,
						cancelText: "不授权",
						confirmText: "授权"
					};
					this.$api
						.showModal(modalData)
						.then(modalRes => {
							uni.openSetting({
								success: settingRes => {},
								fail: settingerror => {}
							});
						})
						.catch(error => {
							console.log("error", error);
						});
				}
			});
		},

		// 表单验证
		validator() {
			const data = this.addressData;
			if (!data.name) {
				this.$api.showToast("请填写收货人姓名");
				return false;
			}
			// if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.phone)) {
			// 	this.$api.showToast("请输入正确的手机号码");
			// 	return false;
			// }
			if (!data.phone || data.phone.length != 11) {
				this.$api.showToast("请输入正确的手机号码");
				return false;
			}
			if (!data.address) {
				this.$api.showToast("请在地图选择所在位置");
				return false;
			}
			if (!data.area) {
				this.$api.showToast("请填写门牌号信息");
				return false;
			}
			return true;
		}
	}
};
</script>

<style lang="scss">
@import "@/pages/user/styles/address/addressDetail.scss";
</style>
